<!DOCTYPE html>
<html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="commom::title('修改')"></head>
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layui-form-pane">
    <div class="layui-form-item" >
        <label class="layui-form-label required">菜品</label>
        <div class="layui-input-block">
            <input type="text" id="monName" name="monName" lay-verify="required" placeholder="请输入菜名" th:value="${monthlyCatering.monName}" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label required" >价格</label>
        <div class="layui-input-block">
            <input type="text" id="cost" name="cost" lay-verify="required" placeholder="请输入价格" th:value="${monthlyCatering.cost}" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item" >
        <label class="layui-form-label required">日期</label>
        <div class="layui-input-block">
            <input id="monTime" type="text" name="monTime" lay-verify="required" placeholder="请输入日期" th:value="${monthlyCatering.monTime}" class="layui-input">
        </div>
        <input type="hidden" id="monId" name="id" th:value="${monthlyCatering.id}">
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label required">图片</label>
        <div style="display: flex">
            <img  id="image" style="width: 100px;height: 100px" th:src="${monthlyCatering.pic}">
            <input type="file"   placeholder="上传" id="input"  class="layui-input">
            <input id="imageInput" name="image" type="hidden" th:value="${monthlyCatering.pic}">
        </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" >
            <button class="layui-btn layui-btn-normal" style="width: 80%"  lay-submit lay-filter="altBtn">确认修改</button>
        </div>
    </div>
</div>
<script th:src="@{/static/lib/layui-v2.5.5/layui.js}" charset="utf-8"></script>
<script>
    layui.use(['form','layer'], function () {
        const form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        let input_ele = document.getElementById('input')
        input_ele.addEventListener('change',function (e) {
            let file = e.target.files[0]
            console.log(file)
            let formData = new FormData()
            formData.append('file',file)
            fetch('/root/upload', {
                method: 'POST',
                body: formData
            }).then(response => response.json())
                .then(data => {
                    console.log(data)
                    if (data.code === 0) {
                        document.getElementById('image').src = data.data
                        document.getElementById('imageInput').value = data.data
                    } else {
                        layer.msg(data.msg, {icon: 2})
                    }
                })
        })


        form.on('submit(altBtn)', function (data) {
            let payload = {
                monName:document.getElementById('monName').value,
                cost:document.getElementById('cost').value,
                monTime:document.getElementById('monTime').value,
                pic:document.getElementById('imageInput').value,
                id:document.getElementById('monId').value
            }
            $.ajax({
                url:'/root/modifyMon',
                data:payload,
                dataType:'json',
                type:'post',
                success:function (data) {
                    if (data.code===200){
                        layer.msg(data.msg,{icon:1});
                    }else{
                        layer.msg(data.msg,{icon:2});
                    }
                    setTimeout(function () {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        window.parent.location.reload();
                    }, 1000);
                }
            })
            return false;
        });

    });
</script>
</body>
</html>
